<template>
	<div class="right_box">
		<div class="tabs_box">
			<router-link :to="tab.view" v-for="(tab,index) in tabs" :key="index" class="right_linkTabs" @click.native.prevent>
				<header class="right_header">
					<div class="right_tab" @click="btn(tab.name,index)">
						<span class="right__name">{{tab.name}}</span>
						<span class="right__img" v-if="tab.name!=='首页'" @click.stop.prevent="del(index)"><i class="glyphicon glyphicon-remove"></i></span>
					</div>
				</header>
			</router-link>
		</div>
		<!--<div class="right_placeholder"></div>-->
		<div class="right_content">
			<!-- 路由视图 -->
			<keep-alive>
				<router-view></router-view>
			</keep-alive>
		</div>
	</div>
</template>

<script>
	export default {
		data(){
			return{
				currentIdx:0
			}
		},
		props: ["tabs"],
		methods: {
			del(index) {
				this.$emit('delTabEvent', index, 1)
			},
			btn(name,index){
				this.$emit('showbox',name)
			}
		}
	}
</script>
<style>
	.right_box {
		background: #fff;
	}
	
	.tabs_box {
		width: 87%;
		/*margin-left:10px ;*/
		height: 41px;
		border-bottom: 1px solid #ddd;
		margin-bottom: 10px;
		z-index: 10050;
	    position: absolute;
	    background: #fff;
	}
	
	.right_placeholder {
		background: #F3F6F9;
		width: 87%;
		height: 10px;
		clear: both;
	}
	
	.right_linkTabs {
		height: 40px;
		float: left;
		line-height: 40px;
		/*color: #555;*/
		text-align: center;
		padding: 0 20px;
		cursor: default;
		background-color: #fff;
	}
	
	.right_box a {
		text-decoration: none;
		/*color: #555;*/
	}
	
	.right_linkTabs:hover {
		background: #eee;
		cursor: pointer;
	}
	.right_box .router-link-active{
		height: 41px;
		color: #555;
		cursor: default;
		border: 1px solid #ddd;
		border-bottom-color: transparent;
	}
	.right_box .router-link-exact-active {
		height: 41px;
		color: #555;
		cursor: default;
		border: 1px solid #ddd;
		border-bottom-color: transparent;
	}
	
	.router-link-active:hover {
		background: #fff;
		color: #555;
	}
	.right__img{
		padding: 5px;
		cursor: pointer;
	}
	.right_content {
		clear: both;
		position: absolute;
		top: 50px;
		width: 87%;
		height:1100px;
		overflow: hidden;
		overflow-y: auto;
		background: #fff;
	}
</style>